<template>
  <div class="drill-container">
    <ul class="list-group list-group-striped">
      <li class="popup-group-item">
        <label>类型</label>
        <div class="pull-left">
          <el-checkbox v-model="wellK.wellDepthChecked" @change="checkChanged('0')">测井水深图</el-checkbox>
        </div>
        <div class="pull-left" >
          <el-checkbox v-model="wellK.wellPollutantChecked" @change="checkChanged('1')">污染物浓度图</el-checkbox>
        </div>
      </li>
      <!-- <li class="popup-group-item">
        <label>属性</label>
        <div class="pull-left">
          <el-select size="small" v-model="wellK.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </li>
      <li class="popup-group-item">
        <label>数值</label>
        <div class="pull-left">
          <span>最大值</span>
          <el-input-number
            class="numsty"
            v-model="wellK.num1"
            :step="0.1"
            controls-position="right"
            size="mini"
            :min="1"
            :max="wellK.num2"
          ></el-input-number>
          <span>最小值</span>
          <el-input-number
            class="numsty"
            v-model="wellK.num2"
            :step="0.1"
            controls-position="right"
            size="mini"
            :min="wellK.num1"
            :max="10"
          ></el-input-number>
        </div>
      </li> -->
      <li class="popup-group-item">
        <label>颜色切换</label>
        <div class="pull-left colorSelect">
          <el-select
            v-model="wellK.colorValue"
            size="small"
            placeholder="请选择"
            :style="{
              background: wellK.colorValue ? wellK.colorValue : '#fff',
            }"
          >
            <el-option
              v-for="item in optionsColor"
              :key="item.value"
              :label="item.label"
              :value="item.label"
              :style="{ background: item.label }"
            >
            </el-option>
          </el-select>
        </div>
      </li>
      <li class="popup-group-item">
        <label>不透明度</label>
        <div class="pull-left">
          <div class="sliderbox">
            <el-slider
              v-model="wellK.sliderValue"
              input-size="mini"
            ></el-slider>
          </div>
        </div>
      </li>
      <li class="popup-group-item">
        <label>操作</label>
        <div class="pull-left">
          <el-button size="small">还原</el-button>
          <el-button type="primary" size="small">应用</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "wellAttrPanel",
  props: {},
  data() {
    return {
      showPanel: false,
      //钻孔方法配置
      options: [
        {
          label: "六价铬",
        },
        {
          label: "总铬",
        },
        {
          label: "坤",
        },
        {
          label: "锂",
        },
        {
          label: "镍",
        },
      ],
      //EM属性选择
      EmOptions: [
        {
          label: "EC475Hz[mS/m]",
        },
        {
          label: "EC1625Hz[mS/m]",
        },
        {
          label: "EC5475Hz[mS/m]",
        },
        {
          label: "EC18575Hz[mS/m]",
        },
        {
          label: "TotalEC[mS/m]",
        },
        {
          label: "MSusc475Hz[1/1000]",
        },
        {
          label: "MSusc1625Hz[1/1000]",
        },
      ],
      optionsColor: [
        {
          value: "1",
          label: "#FFF200",
        },
        {
          value: "2",
          label: "#232B99",
        },
      ],
      wellK: {
        value: "六价铬",
        colorValue: null,
        wellDepthChecked: true,
        wellPollutantChecked: false,
        num1: 1,
        num2: 10,
        sliderValue: 15,
      },
    };
  },
  created() {},
  mounted() {
    console.log(this.$store);
  },
  watch:{
    wellK:{
      handler(newVal,oldVal){
        this.$emit("disPlayWellByType",newVal)
      },
      immediate:true,
      deep:true
    }

  },
  methods: {
    show(val) {
      this.showPanel = val;
    },
    closePanel() {
      this.showPanel = false;
    },
    checkChanged(type){
      switch(type){
        case "0":
          this.wellK.wellPollutantChecked = false
          break;
        case "1":
          this.wellK.wellDepthChecked = false
          break;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.drill-container {
  width: 100%;
  height: 100%;
  .close-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
  }
}
.popup-group-item {
  border: none;
  padding: 2px 0px;
  display: flex;
  align-items: center;
}
.popup-group-item {
  label {
    margin-left: 5%;
    display: inline-block;
    width: 20%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.popup-group-item .pull-left {
  height: 40px;
  display: flex;
  align-items: center;
  text-align: left;
  width: 72%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  label {
    width: 100%;
  }
  .el-checkbox {
    // margin-top: 10px;
  }
  .numsty {
    width: 70px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .sliderbox {
    width: 100%;
    padding: 0px 20px;
  }
}
</style>
